<template>
  <div class="button-group">
    <van-button plain size="large" type="primary" @click="onClick('cancel')">{{ cancelText }}</van-button>
    <van-button size="large" type="primary" v-bind="$attrs" @click="onClick('confirm')">{{ confirmText }}</van-button>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  components: {
    [Button.name]: Button
  },
  inheritAttrs: false,
  props: {
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    onClick(type) {
      this.$emit(type)
    }
  }
}
</script>

<style lang="less">
.button-group {
  position: relative;
  box-shadow: inset 0px 2px 0px 0px #F5F5F5;
  display: flex;
  align-items: center;

  .van-button + .van-button {
    margin-left: 30px;
  }

  .van-button--primary {
    background-color: @primary;
    border-color: @primary;
  }

  .van-button--plain.van-button--primary {
    color: @primary;
    background-color: #ffffff;
  }
}
</style>
